<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var imgs = ["images/tou01.jpg", "images/tou02.jpg", "images/tou03.jpg"];
			$(function() {
				$("header span").click(function() {
					$(".post").show();
				});
				$(".btn").click(function() {
					var inum=Math.floor(Math.random()*3);
					var header="<img style='float:left;margin-right:10px;' src="+imgs[inum]+">";
					var title = $(".title").val();
					var bankuai = $(".baikuai").val();
					var neirong = $(".content").val();
					var d = new Date();
					var $topic = "<li style='height:100px;border-bottom:1px grey dashed;padding:10px 0'>" +header+"<div style='float:left'><p style='font-size:30px'>"+ title+"<br/><br/></p>" + "板块： "+bankuai  +" 发表时间： "+d.toLocaleString()+"</div></li>";
					$("#topic").prepend($topic);
					$(".post").hide();
					$(".title").val("");
					$(".baikuai").val("");
					$(".content").val("");
				});

			});
		</script>
	</head>

	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul id="topic"></ul>
			</section>
			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）" /> 所属版块：
				<select class="baikuai" >
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" />
			</div>
		</div>

	</body>

</html>